<template>
  <div class="runningWaterRecords_lottery">
    <div class="container">
      <div class="lottery-grid">
        <div
          v-for="cell in cells"
          :key="cell.id"
          class="grid-item"
          :style="{ gridArea: `${cell.row} / ${cell.col}` }"
        >
          <div class="grid-item-top">
            <NuxtImg class="img_icon" :src="cell.icon" />
            <NuxtImg class="img_light" :src="assets.light" />
          </div>
          <div class="grid-item-bottom">
            <span>
              {{
                cell.type === "label"
                  ? lang[cell.labelKey]
                  : `${userStore.moneyUnit}${cell.amount}`
              }}
            </span>
          </div>
        </div>
        <div class="center-img">
          <NuxtImg :src="assets.center" />
        </div>
      </div>
    </div>
    <div class="btn-container">
      <div class="amount-of-coding">
        <div>
          {{ lang.lottery_yesterday_bet }}
          <span>{{ userStore.moneyUnit }} 0</span>
        </div>
        <div>
          {{ lang.lottery_today_bet }} <span>{{ userStore.moneyUnit }} 0</span>
        </div>
      </div>
      <div class="btn btn3">
        <NuxtImg :src="assets.btn3" />
        <span>{{ lang.lottery_draw }} X0</span>
      </div>
      <div class="time">
        <NuxtImg :src="assets.time" />
        <div class="text">
          <span>03{{ lang.time_h }}:</span><span>41{{ lang.time_m }}:</span
          ><span>55{{ lang.time_s }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const lang: any = getCurrentPageLang("activity/slot");
const userStore = useUserStore();

interface CellItem {
  id: number;
  row: number;
  col: number;
  icon: string;
  type: "label" | "amount";
  labelKey?:
    | "grand_prize_mini"
    | "grand_prize_minor"
    | "grand_prize_major"
    | "grand_prize_grand";
  amount?: string;
}

const assets = {
  light: "/images/activity/slot/light_1.png",
  center: "/images/activity/slot/icon.png",
  btn3: "/images/activity/slot/btn_3.png",
  time: "/images/activity/slot/time.png",
};

const cells: CellItem[] = [
  {
    id: 1,
    row: 1,
    col: 1,
    icon: "/images/activity/slot/img_1.png",
    type: "label",
    labelKey: "grand_prize_mini",
  },
  {
    id: 2,
    row: 1,
    col: 2,
    icon: "/images/activity/slot/img_5.png",
    type: "amount",
    amount: "0.07",
  },
  {
    id: 3,
    row: 1,
    col: 3,
    icon: "/images/activity/slot/img_9.png",
    type: "amount",
    amount: "177",
  },
  {
    id: 4,
    row: 1,
    col: 4,
    icon: "/images/activity/slot/img_2.png",
    type: "label",
    labelKey: "grand_prize_minor",
  },
  {
    id: 5,
    row: 2,
    col: 4,
    icon: "/images/activity/slot/img_5.png",
    type: "amount",
    amount: "0.7",
  },
  {
    id: 6,
    row: 3,
    col: 4,
    icon: "/images/activity/slot/img_8.png",
    type: "amount",
    amount: "77",
  },
  {
    id: 7,
    row: 4,
    col: 4,
    icon: "/images/activity/slot/img_3.png",
    type: "label",
    labelKey: "grand_prize_major",
  },
  {
    id: 8,
    row: 4,
    col: 3,
    icon: "/images/activity/slot/img_5.png",
    type: "amount",
    amount: "1.7",
  },
  {
    id: 9,
    row: 4,
    col: 2,
    icon: "/images/activity/slot/img_7.png",
    type: "amount",
    amount: "17",
  },
  {
    id: 10,
    row: 4,
    col: 1,
    icon: "/images/activity/slot/img_4.png",
    type: "label",
    labelKey: "grand_prize_grand",
  },
  {
    id: 11,
    row: 3,
    col: 1,
    icon: "/images/activity/slot/img_5.png",
    type: "amount",
    amount: "2.7",
  },
  {
    id: 12,
    row: 2,
    col: 1,
    icon: "/images/activity/slot/img_6.png",
    type: "amount",
    amount: "7",
  },
];
</script>

<style scoped lang="scss">
.runningWaterRecords_lottery {
  margin: 0.24rem 0 0.32rem;
  padding: 0.24rem 0;
  width: 100%;
  background: var(--theme-color4);
  color: var(--theme-neutral1);
  border-radius: 0.3rem;

  .container {
    display: flex;
    justify-content: center;
    align-items: center;

    .lottery-grid {
      display: grid;
      grid-template-columns: repeat(4, 2.1rem);
      grid-template-rows: repeat(4, 2.1rem);
      gap: 0.16rem;
      position: relative;

      .grid-item {
        position: relative;
        z-index: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        box-sizing: border-box;
        border: 0.04rem solid var(--theme-color8);
        border-radius: 0.3rem;
        background: var(--theme-color9);

        .grid-item-top {
          position: relative;
          width: 100%;
          display: flex;
          justify-content: center;

          .img_icon {
            position: relative;
            height: 1.3rem;
            z-index: 1;
            margin-top: 0.15rem;
          }
          .img_light {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 1.5rem;
          }
        }
        .grid-item-bottom {
          position: relative;
          z-index: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          width: calc(100% + 0.08rem);
          height: 0.6rem;
          transform: translateY(0.04rem);
          border-radius: 0 0 0.3rem 0.3rem;
          background: linear-gradient(
            360deg,
            var(--theme-main-gradient1) 0%,
            var(--theme-main-gradient2) 81%
          );
        }
      }

      .center-img {
        grid-column: 2 / span 2;
        grid-row: 2 / span 2;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;

        img {
          width: 5.72rem;
          height: 5.72rem;
        }
      }
    }
  }

  .btn-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    margin-top: 0.3rem;

    .amount-of-coding {
      display: flex;
      justify-content: space-between;
      font-weight: 500;
      font-size: 0.34rem;
      width: 100%;
      padding: 0 0.32rem;
      box-sizing: border-box;

      span {
        margin-left: 0.29rem;
        color: var(--theme-dec4);
      }
    }

    .btn {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 4.44rem;
      height: 1.2rem;

      img {
        position: absolute;
        width: 100%;
        height: 100%;
      }
      span {
        position: relative;
        z-index: 1;
        font-weight: 800;
        color: var(--theme-dec3);
      }

      &.btn3 span {
        color: var(--theme-neutral1) !important;
      }
    }

    .time {
      display: flex;
      align-items: center;
      gap: 0.2rem;

      img {
        width: 0.5rem;
        height: 0.5rem;
      }
      .text {
        font-weight: 500;
        font-size: 0.34rem;
      }
    }
  }
}
</style>
